<template>
  <div class="search">
    <v-loading v-bind:loading="loading"></v-loading>
    <div class="search-wrap">
      <span class="go fr" v-on:click="submit">搜索</span>
      <span class="back fl" v-on:click="notSubmit"></span>
      <input type="text" id="search-input" v-model="query" v-on:focus="searchAgain">
    </div>
    <div class="search-hot" v-if="showHot">
      <h3>热门搜索</h3>
      <div class="list-hot">
        <a href="javascript:;" v-for="item in hotList" v-text="item.name" v-on:click="searchHot(item.id)"></a>
      </div>
    </div>
    <div class="search-result" v-if="showResult">
      <h3>搜索结果</h3>
      <p>“{{ val }}”的搜索结果，共{{ total }}条信息</p>
      <div class="media clearfix" v-for="item in movieList" v-on:click="searchHot(item.id)">
        <div class="media-left">
          <a href="javascript:;">
            <img class="media-object" v-bind:src="item.images.large">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading" v-text="item.title + '(' + item.year + ')'"></h4>
          <p v-text="'评分：' + item.rating.average + ' (' + item.collect_count + '人评价)'"></p>
          <!-- vue2.0 中 v-text 不能使用过滤器 -->
          <p>{{ item.genres | getGenres }}</p>
          <p>{{ item.casts | getNames }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getMovie } from '../config/api.js'
  import { getNames, getGenres } from '../config/filter.js'
  import loading from '../page/loading.vue'
  export default {
    data () {
      return {
        query: '',
        movieType: 'search',
        val: '',
        total: '',
        hotList: [
          { name: '战狼2', id: '26363254' },
          { name: '三生三世十里桃花', id: '25823277' },
          { name: '建军大业', id: '26692823' },
          { name: '神偷奶爸3', id: '25812712' },
          { name: '金刚狼3', id: '25765735' },
          { name: '心理罪', id: '26698000' },
          { name: '十万个冷笑话2', id: '26759539' }
        ],
        movieList: {},
        showHot: true,
        showResult: false,
        loading: false
      }
    },
    filters: {
      getNames,
      getGenres
    },
    methods: {
      /* 搜索 */
      submit: function () {
        this.$router.push({
          path: '/search',
          /* 此属性会将键值对拼在 path? 后面 例：/search?key=战狼3 */
          query: {
            key: this.query
          }
        })
        /* 调用搜索结果函数 */
        this.searchResult()
        this.showHot = false
        this.loading = true
      },
      /* 返回 */
      notSubmit: function () {
        /* window.history.go(-1) */
        this.$router.push({
          path: './home'
        })
      },
      /* 热门搜索详情 */
      searchHot: function (id) {
        this.$router.push({
          path: './movieMsg/' + id
        })
      },
      /* 定义搜索结果函数 */
      searchResult: function () {
        /* 获取url中搜索的内容 key后面的参数 */
        this.val = this.$route.query.key
        let movieType = this.movieType + '?q=' + this.val
        getMovie(this.$http, movieType)
        .then((response) => {
          /* console.log(response.body) */
          this.total = response.body.total
          this.movieList = response.body.subjects
          this.showResult = true
          this.loading = false
        }, (response) => {
          this.$router.push({
            path: '/page404'
          })
        })
      },
      searchAgain: function () {
        this.showHot = true
        this.showResult = false
      }
    },
    components: {
      'v-loading': loading
    }
  }
</script>
